<template>
	<div class="publicpageview">
		<div class="topInput" v-if="type==''">
      <el-button class="buttons" type="primary" size="mini" @click="handleAddUser">打印</el-button>
			<el-form :rules='rules' :inline="true" :model="listQuery" size="mini" ref="addForm" label-width="170px">
				<div>
					<el-form-item label="管片：" prop="check1" label-width="140px">
						<el-select clearable v-model="listQuery.check1">
							<div v-for="(item,index) in guanpianList" :key="index">
								<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="check2" label-width="140px">
						<el-select clearable v-model="listQuery.check2" @change='blockChange' value-key="blockno">
							<div v-for="(item,index) in blList" :key="index">
								<el-option :label="item.blockno" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="附属：" prop="check3" label-width="140px">
						<el-input v-model="listQuery.check3"></el-input>
					</el-form-item>
					<el-form-item label="产别：" prop="check4" label-width="140px">
						<el-select v-model="listQuery.check4" :disabled='listQuery.check4=="直管公产"'>
							<div v-for="(item,index) in chanbieList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="地级： " prop="check5" label-width="140px">
						<el-select v-model="listQuery.check5">
							<el-option label="一级" value="一级" key="0"></el-option>
							<el-option label="二级" value="二级" key="1"></el-option>
							<el-option label="三级" value="三级" key="2"></el-option>
							<el-option label="四级" value="四级" key="3"></el-option>
							<el-option label="五级" value="五级" key="4"></el-option>
							<el-option label="*" value="*" key="5"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="建筑：" prop="check6" label-width="140px">
						<el-select v-model="listQuery.check6" @change="jianzhuChange" clearable>
							<div v-for="(item,index) in jianzhuxingshiList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="形式：" prop="check7" label-width="140px">
						<el-select v-model="listQuery.check7" @change="jianzhuChange" clearable>
							<div v-for="(item,index) in jianzhuxingshimingxiList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="查询日期：" prop="check8" label-width="140px">
						<el-date-picker style="width: 130px;" v-model="listQuery.check8" type="date" placeholder="年/月/日">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="调租日期：" prop="check9" label-width="140px">
						<el-date-picker style="width: 130px;" v-model="listQuery.check9" type="date" placeholder="年/月/日">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="管理形式：" prop="check10" label-width="140px">
						<el-select clearable v-model="listQuery.check10" placeholder="全部">
							<el-option label="正常" value="正常"></el-option>
							<el-option label="新纳入" value="新纳入"></el-option>
							<el-option label="托管房屋" value="托管房屋"></el-option>
						</el-select>
					</el-form-item>
					<div class="radios">
						<div class="radioList">
							<el-radio v-model="listQuery.check0" label="1">租金调整过录表</el-radio>
						</div>
						<div class="radioList">
							<el-radio v-model="listQuery.check0" label="2">租金测算明细表 </el-radio>
						</div>
						<div class="radioList">
							<el-radio v-model="listQuery.check0" label="3">租金调整所汇总表</el-radio>
						</div>
					</div>
					<div class="radios">
						<div class="radioList">
							<el-radio v-model="listQuery.check0" label="4">租金测算汇总表 </el-radio>
						</div>
						<div class="radioList">
							<el-radio v-model="listQuery.check0" label="5">租金调整门汇总表</el-radio>
						</div>
						<div class="radioList">
							<el-radio v-model="listQuery.check0" label="6">附加租金分析表 </el-radio>
						</div>
					</div>
				</div>
			</el-form>
		</div>
		
		<zujintiaozhengguocheng v-if="type==1" :blockobj="objData"></zujintiaozhengguocheng>
		<zujintiaozhengmenhui v-if="type==5" :blockobj="objData"></zujintiaozhengmenhui>
		<zujintiaozhengsuohui v-if="type==3" :blockobj="objData"></zujintiaozhengsuohui>
		
		<fujiazujinfenxibiao v-if="type==2" :blockobj="objData"></fujiazujinfenxibiao>
		<zujincesuanhuizhong v-if="type==4" :blockobj="objData"></zujincesuanhuizhong>
		<zujincesuanmingxi v-if="type==6" :blockobj="objData"></zujincesuanmingxi>
	</div>
</template>

<script>
	import zujintiaozhengguocheng from './components/zujintiaozhengguocheng.vue'
	import zujintiaozhengmenhui from './components/zujintiaozhengmenhui.vue'
	import zujintiaozhengsuohui from './components/zujintiaozhengsuohui.vue'
	import fujiazujinfenxibiao from './components/fujiazujinfenxibiao.vue'
	import zujincesuanhuizhong from './components/zujincesuanhuizhong.vue'
	import zujincesuanmingxi from './components/zujincesuanmingxi.vue'
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		getArea,
		getHouseAdmin,
		unitPage,
		blockGroupList,
		blockList,
		zhuZhaiExport,
		blockDetail
	} from '@/api/industry'
	export default {
		name: 'AccommodationManagementChanquanzhengjian',
		components:{
			zujintiaozhengguocheng,
			zujintiaozhengmenhui,
			zujintiaozhengsuohui,
			fujiazujinfenxibiao,
			zujincesuanhuizhong,
			zujincesuanmingxi
		},
		data() {
			return {
				listQuery: {
					check0: '',
					check1: '',
					check2: '',
					check3: '',
					check4: '',
					check5: '',
					check6: '',
					check7: '',
					check8: '',
					check9: '',
					check10: '',
				},
				type:'',
				objData:{},
				rules: {
					check0: [
						{
							required: true,
							message: '请选择查询类型',
							trigger: 'blur'
						}
					],
					check1: [
						{
							required: true,
							message: '请选择管片',
							trigger: 'blur'
						}
					],
					check2: [
						{
							required: true,
							message: '请选择所号',
							trigger: 'blur'
						}
					],
					check3: [
						{
							required: true,
							message: '请输入附属',
							trigger: 'blur'
						}
					],
				},
				guanpianList: [],
				blList: [],
				chanbieList: [],
				// 建筑形式
				jianzhuxingshiList: [],
				// 建筑形式明细
				jianzhuxingshimingxiList: [],
			}
		},

		computed: {},

		mounted() {
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '产别') {
					item.classmidList.forEach((it, idx) => {
						if (it.classmid == '产别') {
							this.chanbieList = it.classdetailList
						}
					})
				} else if (item.classname == '建筑形式') {
					this.jianzhuxingshiList = item.classmidList
				}
			})
			this.blockGroupList()
			this.blockList()
			this.listQuery.check8 = new Date()
		},

		methods: {
			// 管片列表
			blockGroupList() {
				let data = {
					group: '',
					groupNumber: '',
					houseAdmin: '',
					pageNum: '',
					pageSize: 99999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.guanpianList = res.data.list
					this.listLoading = false
					// this.houseAdminList()
				})
			},
			blockList() {
				let data = {
					limit: 99999,
					page: 1
				}
				blockList(data).then((res) => {
					this.blList = res.data.list
				})
			},
			// 选择建筑形式
			jianzhuChange(value) {
				this.chanyeList.forEach((item, index) => {
					if (item.classname == '建筑形式') {
						item.classmidList.forEach((it, idx) => {
							if (value == '楼房' && it.classmid == '楼房') {
								this.jianzhuxingshimingxiList = it.classdetailList
							} else if (value == '平房' && it.classmid == '平房') {
								this.jianzhuxingshimingxiList = it.classdetailList
							}
						})
					}
				})
			},
			blockChange(e) {
			//   this.blockid = e.blockid
			  this.listQuery.check2 = e.blockno
			
			  let data = {
			    BlockID: e.blockid
			  }
			  blockDetail(data).then((res) => {
					this.listQuery.check3 = res.data.address
			  })
			},
			handleAddUser(){
				this.$refs.addForm.validate((valid) => {
				  if (valid) {
						let data = this.listQuery
						data.check8 = data.check8 ?dayjs(data.check8).format('YYYY-MM-DD HH:mm:ss') : '',
						data.check9 = data.check9 ?dayjs(data.check9).format('YYYY-MM-DD HH:mm:ss') : ''
						if(data.check0){
					
							zhuZhaiExport(data).then(res=>{
								this.type = data.check0
								this.objData = res.data
							})
						}else{
							this.$message({
							  type: 'info',
							  message: '请选择查询类型'
							})
						}
						
				  } else {
				    return false
				  }
				})
				
			}
		}
	}
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.title {
		color: #008c93;
		text-align: center;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.cfguanpian {
		padding-bottom: 20px;
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.title2 {
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.tianjiaButton {
		border: 2px solid #008c93;
		background-color: #fff;
		color: #008c93;
	}

	/deep/.el-input__inner {
		width: 130px;
	}

	/deep/.publicpaginationview .el-input__inner {
		width: 100px;
	}

	/deep/.publicpaginationview .is-in-pagination .el-input__inner {
		width: 50px;
	}

	.list {
		display: flex;
	}

	.topInput {
		width: 70%;
		height: 550px;
		margin: 0 auto;
		background-color: #fff;
		padding-top: 20px;
	}

	.radios {
		display: flex;
	}

	.radioList {
		width: 800px;
		margin-top: 30px;
		margin-left: 100px;
	}
	.buttons{
		margin:20px 0 20px 90%;
		display: block;
	}
</style>